<template>
  <div class="UserIndex">
    <!-- 主体模块开始 -->
    <SearchAndList>
      <!-- 搜索部分开始 -->
      <template #search>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="商品类型搜索：" size="medium">
            <el-input
              v-model="searchForm.className"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getskuList(true)"
              size="medium"
              icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <!-- 搜索部分结束 -->
      <!-- 按钮开始 -->
      <template #buttons>
        <el-button size="medium" icon="el-icon-circle-plus-outline" @click="openDialog()">新建</el-button>
      </template>
      <!-- 按钮结束 -->
      <!-- 列表开始 -->
      <template #list>
        <el-table v-loading="loading" :data="skuList.currentPageRecords" style="width: 100%">
          <!-- 序号 -->
          <el-table-column type="index" :index="getIndex" label="序号" width="80" />
          <!-- 商品类型名称 -->
          <el-table-column prop="className" label="商品类型名称"/>
          <!-- 操作 -->
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="openDialog(scope.row.classId, scope.row.className )"
                type="text"
              >修改</el-button>
              <el-button
                @click.native.prevent="delSKU( scope.row.classId)"
                type="text"
                class="el-button--danger-text"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 列表结束 -->
      <!-- 底部分页开始 -->
      <template #bottom>
        <el-pagination
          @current-change="paginaTion"
          layout="slot, prev, next"
          :page-size="10"
          :total="getTotalCount"
          prev-text="上一页"
          next-text="下一页"
          background
        >
        <template>
          <div class="str">共 {{ skuList.totalCount }} 条记录&nbsp;&nbsp;第 {{ skuList.pageIndex }}/{{ skuList.totalPage }} 页</div>
        </template>
        </el-pagination>
      </template>
      <!-- 底部分页结束 -->
    </SearchAndList>
    <!-- 主体模块结束 -->
    <skuClassDialog :dialog.sync="dialog"/>
  </div>
</template>

<script>
import { getSKU, delSKU } from '@/api/skuAPIs'
import SearchAndList from '@/components/SearchAndList'
import skuClassDialog from '@/components/Dialog/skuClass'
export default {
  components: {
    SearchAndList,
    skuClassDialog
  },
  data () {
    return {
      // 搜索用户名
      searchForm: {
        className: ''
      },
      // 人员列表
      skuList: {
        currentPageRecords: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      // 每页数量
      pageSize: 10,
      // 当页索引
      pageIndex: 1,
      // 加载状态
      loading: false,
      // 弹出窗
      dialog: {
        visible: false, // 是否显示
        classId: 0,
        className: ''
      }
    }
  },
  created () {
    // 获取列表
    this.getskuList()
  },
  methods: {
    // 获取列表
    async getskuList (res = false) {
      // 如果需要重置（用于搜索）
      if (res) this.pageIndex = 1
      try {
        this.loading = true
        const { data: skuList } = await getSKU({
          pageSize: this.pageSize,
          pageIndex: this.pageIndex,
          className: this.searchForm.className ? this.searchForm.className : null
        })
        this.skuList = skuList
        console.log(this.skuList)
      } finally {
        this.loading = false
      }
    },
    // 计算索引
    getIndex (index) {
      if (this.pageIndex === '1') {
        return index + 1
      } else {
        return index + 10 * (this.pageIndex - 1) + 1
      }
    },
    // 上一页下一页
    paginaTion (res) {
      if (!this.loading) {
        if (res > this.pageIndex) {
          this.pageIndex++
          this.getskuList()
        } else {
          this.pageIndex--
          this.getskuList()
        }
      }
    },
    // 新建或编辑按钮
    openDialog (valID = 0, className = '') {
      this.dialog.visible = true
      this.dialog.classId = valID
      this.dialog.className = className
    },
    // 删除人员
    async delSKU (id) {
      this.$confirm(
        '<i class="el-icon-warning" style="color: #ff665f;"></i>&nbsp;&nbsp;删除后将不能恢复',
        {
          center: true,
          dangerouslyUseHTMLString: true
        }
      )
        .then(async () => {
          try {
            await delSKU(id)
            this.$message.success('删除成功')
            this.getskuList()
          } catch (e) {
            this.$message.success('出错了')
            console.log(e)
          }
        })
        .catch(() => {
          // 留着不给报错
        })
    }
  },
  computed: {
    getTotalCount () {
      return +this.skuList.totalCount
    }
  }
}
</script>

<style>

</style>
